import React, {useState} from 'react'
import {PlusOutlined} from '@ant-design/icons'
import {
    Row,
    Col,
    Flex,
    Typography,
    Button,
    Form,
    Input,
    Select,
    Table,
    Alert,
    message,
    Modal
} from 'antd'
import MyDatePicker from '../components/MyDatePicker'
import {useEffect} from 'react'
import {
    contentArticleDel,
    contentArticleEdit,
    contentArticleList
} from '../service/content'
import {Link, useNavigate} from 'react-router-dom'

function ContentTwitter() {
    const navigate = useNavigate()
    // 保存表格中选中的项
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    // 表格中是否有选中
    const hasSelected = selectedRowKeys.length > 0
    // 保存选择的日期
    const [selectedDateString, setSelectedDateString] = useState(null)
    // 模态框
    const [total, setTotal] = useState(0)
    const [pageNo, setPageNo] = useState(1)
    const [condition, setCondition] = useState({})
    const [n, setN] = useState(0)
    // 文章列表
    const [list, setList] = useState([])

    const request = async () => {
        const res = await contentArticleList({
            ...condition,
            pageNo: pageNo,
            pageSize: 10,
            articleStatus: 0
        })
        console.log(res)
        setTotal(res.data.total)
        setList(res.data.objects)
    }
    useEffect(() => {
        ;(async () => {
            const res = await contentArticleList({
                ...condition,
                pageNo: pageNo,
                pageSize: 10,
                articleStatus: 0
            })
            console.log(res)
            setTotal(res.data.total)
            setList(res.data.objects)
        })()
    }, [n])
    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={4}>信息管理</Typography.Title>
                        <Button
                            type="primary"
                            icon={<PlusOutlined/>}
                            onClick={() => navigate('/admin/content/add')}
                        >
                            推文创作
                        </Button>
                    </Flex>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Form layout="inline">
                        <Form.Item label="文章标题：" name="articleTitle">
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="文章分类："
                            name="articleCategoryId"
                            initialValue={'0'}
                        >
                            <Select
                                style={{width: 120}}
                                options={[
                                    {
                                        value: '0',
                                        label: '全部'
                                    },
                                    {
                                        value: '1',
                                        label: '启用'
                                    },
                                    {
                                        value: '2',
                                        label: '停用'
                                    }
                                ]}
                            />
                        </Form.Item>

                        <Form.Item label="更新时间：">
                            <MyDatePicker
                                selectedDateString={selectedDateString}
                                setSelectedDateString={setSelectedDateString}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button
                                type="default"
                                htmlType="reset"
                                onClick={() => setSelectedDateString(null)}
                            >
                                重置
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
            {/* 表格 */}
            <Row className="container">
                <Col span={24}>
                    <Typography.Paragraph style={{fontSize: 16}}>
                        推文列表
                    </Typography.Paragraph>
                    {hasSelected && (
                        <Alert
                            message={`已经选择 ${selectedRowKeys.length} 项`}
                            type="info"
                            showIcon
                        />
                    )}
                </Col>
                <Col span={24}>
                    <Table
                        rowKey="id"
                        rowSelection={{
                            selectedRowKeys,
                            onChange: (newSelectedRowKeys) => {
                                console.log('selectedRowKeys changed: ', newSelectedRowKeys)
                                setSelectedRowKeys(newSelectedRowKeys)
                            }
                        }}
                        dataSource={list}
                        columns={[
                            {
                                title: '编号',
                                dataIndex: 'id',
                                key: 'id'
                            },
                            {
                                title: '文章标题',
                                dataIndex: 'articleTitle',
                                key: 'articleTitle'
                            },
                            {
                                title: '文章分类',
                                dataIndex: 'articleCategory',
                                key: 'articleCategory' // articleCategoryId
                            },
                            {
                                title: '标签',
                                dataIndex: 'articleLabel',
                                key: 'articleLabel'
                            },
                            {
                                title: '最后修改时间',
                                dataIndex: 'updateTime',
                                key: 'updateTime'
                            },
                            {
                                title: '操作',
                                dataIndex: 'op',
                                key: 'op',
                                align: 'center',
                                render: (_, record) => {
                                    return (
                                        <span className="op">
                      <a
                          onClick={async () => {
                              const res = await contentArticleEdit({
                                  id: record.id,
                                  articleStatus: 1,
                                  longitude: record.longitude,
                                  latitude: record.latitude
                              })
                              console.log(res)
                              if (res.code === '0') {
                                  message.success('上线成功')
                                  setN(n + 1)
                              }
                          }}
                      >
                        上线
                      </a>
                      <Link to={`/admin/content/article/edit/${record.id}`}>
                        编辑
                      </Link>
                      <a
                          onClick={async () => {
                              const res = await contentArticleDel({
                                  id: record.id
                              })
                              console.log(res)
                              if (res.code === '0') {
                                  message.success('删除成功')
                                  setN(n + 1)
                              } else {
                                  message.error('删除失败')
                              }
                          }}
                      >
                        删除
                      </a>
                    </span>
                                    )
                                }
                            }
                        ]}
                    />
                </Col>
            </Row>
        </>
    )
}

export default ContentTwitter
